<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 100%;
            height: 1rem;
            text-align: center;
            position: relative;
            border-bottom: 1px solid #eeeeee;
        }
        .title{
            height: 1rem;
            line-height: 1rem;
        }
        .header .back{
            width: 0.2rem;
            height: 0.38rem;
            position: absolute;
            top: 0.31rem;
            left: 0.25rem;
        }
        .list{
            width: 7rem;
            margin: 0 auto;
        }
        .list .li{
            display: flex;
            height: 1rem;
            line-height: 1rem;
            border-bottom: 1px solid #eeeeee;
        }
        .list .li span{
            flex: 1;
            font-size: 0.28rem;
        }
        .list .li input{
            flex: 3;
            border: none;
            height: 0.9rem;
            line-height: 0.9rem;
            margin-top: 0.05rem;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-user-modify: read-write-plaintext-only;
            outline: none;
            box-shadow: none;
        }
        .list .li #city{
            flex: 3;
            font-size: 0.24rem;
            /*color: #969696;*/
        }
        .footer{
            width: 100%;
            text-align: center;
            height: 1.2rem;
            position: fixed;
            left: 0;
            bottom: 0;
            /*z-index: 90;*/
        }
        .btn{
            width: 6.5rem;
            height: 1rem;
            border: none;
            outline: none;
            border-radius: 0.2rem;
            font-size: 0.32rem;
            color: #ffffff;
            background: -webkit-linear-gradient(left, #ffa04d , #ff683a); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right,  #ffa04d , #ff683a); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right,  #ffa04d , #ff683a); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right,  #ffa04d , #ff683a); /* 标准的语法 */
        }
        .tankuang{width: 5.7rem;min-height: 2.86rem;background: #ffffff;position: fixed;left: 0.9rem;top: 4rem;z-index: 100;border-radius: 0.1rem;display: none}
        .zhezhao{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99;background: rgba(0,0,0,0.5);display: none}
        .tankuang .tip,.tankuang p{text-align: center;height: 1rem;line-height: 1rem;font-size: 0.34rem;color: #666666}
        .t{display: flex;border-top: 1px solid #eeeeee}
        .cancel,.ok{flex: 1;text-align: center;height: 0.9rem;line-height: 0.9rem}
        .cancel{border-right: 1px solid #eeeeee}
    </style>
    <script>
        (function(designWidth, maxWidth) {
            var doc = document,
                win = window,
                docEl = doc.documentElement,
                remStyle = document.createElement("style"),
                tid;
            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                maxWidth = maxWidth || 540;
                width>maxWidth && (width=maxWidth);
                var rem = width * 100 / designWidth;
                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
            }
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(remStyle);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(remStyle);
                doc.write(wrap.innerHTML);
                wrap = null;
            }
            refreshRem();
            win.addEventListener("resize", function() {
                clearTimeout(tid)
                tid = setTimeout(refreshRem, 300);
            }, false);
            win.addEventListener("pageshow", function(e) {
                if (e.persisted) {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);
            if (doc.readyState === "complete") {
                doc.body.style.fontSize = "16px";
            } else {
                doc.addEventListener("DOMContentLoaded", function(e) {
                    doc.body.style.fontSize = "16px";
                }, false);
            }
        })(750, 750);
    </script>
</head>
<body>
<header class="header">
    <img class="back" src="images/back.png" onclick="back()" alt="">
    <p class="title">新建地址</p>
</header>

<div class="list">
    <div class="li">
        <span>收货人</span>
        <input type="text" name="people"/>
    </div>
    <div class="li">
        <span>联系方式</span>
        <input type="tel" maxlength="11" name="phone"/>
    </div>
    <div class="li">
        <span>当前省市</span>
        <p id="city">湖北省武汉市</p>
    </div>
    <div class="li">
        <span>详细地址</span>
        <input type="text" placeholder="请输入区域、街道、楼牌号等" name="address"/>
    </div>
</div>

<div class="tankuang">
    <div class="tip">提示</div>
    <p>信息尚未保存，确认现在返回吗？</p>
    <div class="t">
        <span class="cancel">取消</span>
        <span class="ok">确定</span>
    </div>
</div>

<div class="zhezhao"></div>

<footer class="footer">
    <button class="btn">保&nbsp;&nbsp;存</button>
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    var start =getUrlParam('start');
    if(start == '1'){
        $('.btn').text('保存并使用');
    }
    $(".btn").click(function () {
        // var cusId = 1;
        var customer_id = localStorage.getItem("customer_id");
        var phone = $("input[name='phone']").val();
        var people = $("input[name='people']").val();
        var address = $("input[name='address']").val();
        var pro = "湖北省";
        var cit = "武汉市";
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
        var flag = reg.test(phone);
        if(phone==''){
            alert("您还没有填写联系方式")
        }else if(phone!=''&&flag==false){
            alert("联系方式填写错误")
        }else if(people==''){
            alert("您还没有填写姓名")
        }else if(address==''){
            alert("请填写详细地址")
        }else{
            $.ajax({
                url:"http://192.168.1.44/shop/Shop/address",
                type:"post",
                data:{customer_id:customer_id,province:pro,city:cit,detail:address,phone:phone,name:people},
                success:function (res) {
                    
                    var data = JSON.parse(res);
                    console.log(data);
                    if(start == 1){
                        window.location.href="CommodityDetailsPage.html";
                    }else{
                        window.location.href="ReceivingAddress.html";
                    }
                   
                    $("input[name='phone']").val('');
                    $("input[name='people']").val('');
                    $("input[name='address']").val('');
                }
            })
        }
    })

    function back() {
        if($(".btn").attr("done") == undefined&&$("input[name='phone']").val()!=''&&$("input[name='people']").val()!=''&&$("input[name='address']").val()!=''){
           $(".tankuang").css("display","block");
           $(".zhezhao").css("display","block");
        }else{
            window.history.go(-1);
            // window.location.href="CommodityDetailsPage.html"
        }
    }

    $(".cancel").click(function () {
        $(".tankuang").css("display","none");
        $(".zhezhao").css("display","none");
    });

    $(".ok").click(function () {
        window.history.go(-1);
    })
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }
</script>

</body>
</html>